<template>
	<div class="city-list">
		<div class="city-list__item" v-for="(item, index) in list" :key="index">
			<div
				class="item ellipsis"
				:class="{ active: activeVal === item && showActive }"
				@click="handleSelect(item, index)"
			>
				{{ item }}
			</div>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		value: {
			type: String,
			default: null
		},
		list: {
			type: Array,
			default: () => []
		},
		showActive: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			activeVal: this.value
		};
	},
	watch: {
		value(v) {
			this.activeVal = v;
		}
	},
	methods: {
		handleSelect(item) {
			this.$emit("select", item);
			this.handleChange();
		},
		handleChange() {
			this.$emit("input", this.activeVal);
		}
	}
};
</script>
<style lang="scss" scoped>
.city-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;

	&__item {
		width: 33.3333333%;
		// float: left;
		padding: 5px;
		box-sizing: border-box;
		.item {
			height: 1rem;
			line-height: 1rem;
			padding: 0 0.2rem;
			background: #fff6ee;
			border: 1px solid #ff7400;
			color: #ff7400;
			text-align: center;
			font-size: 0.3555555rem;
			border-radius: 4px;
			box-sizing: border-box;
			&.active {
				background-color: #ff7400;
				color: #fff;
			}
		}
	}
}
</style>
